<template>
  <div class="SongHeader">
    <img :src="srcImg" alt="" />
    <div>
      <div
        class="songBackground"
        :style="{ backgroundImage: 'url(' + srcImg + ')' }"
      ></div>
      <h3><span>精品歌单</span></h3>
      <h2>{{ playlists.name }}</h2>
      <p>{{ playlists.copywriter }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SongHeader",
  data() {
    return {
      playlists: {},
      srcImg: "",
      isSongIf: true,
    };
  },
  props: {
    tagsName: String,
  },
  mounted() {
    this.getHighquality();
  },
  methods: {
    async getHighquality() {
      const relust = await this.$API.home.getHighquality(this.tagsName);
      if(relust.total){
        this.srcImg = relust.playlists[0].coverImgUrl;
        this.playlists = relust.playlists[0];
        this.isSongIf = true;
      }
        this.$emit("song", relust.total);
      
    },
  },
  watch: {
    tagsName() {
      this.getHighquality();
    },
  },
};
</script>

<style lang="less" scoped>
.SongHeader {
  width: 1020px;
  min-width: 800px;
  height: 175px;
  position: relative;
  // background-image: url("../../../images/image/45b48ab655714975ac4c9cc7ae20a064.jpg");
  border-radius: 10px;
  margin: 20px auto;
  display: flex;
  justify-items: center;
  // &::before {
  // }
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    .songBackground {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 175px;
      background: transparent;
      background-position: center;
      // background-image: url(../../../images/image/45b48ab655714975ac4c9cc7ae20a064.jpg);
      filter: blur(7px);
      z-index: -1;
      background-size: cover;
      border-radius: 10px;
    }
  }

  h3 {
    font-size: 16px;
    text-align: center;
    width: 100px;
    height: 20px;
    line-height: 20px;
    border: 1px solid rgb(231, 170, 90);
    color: rgb(231, 170, 90);
    border-radius: 10px;
    margin: 20px 0;
  }
  h2 {
    color: white;
    font-size: 18px;
  }
  p {
    color: rgb(154, 174, 183);
    margin: 20px 0;
  }
  img {
    width: 150px;
    height: 150px;
    padding: 10px 10px;
    border-radius: 20%;
  }
}
</style>